<template>
	<view class="container">
		<u-tabs-swiper ref="ordertabs" :list="tabslist" gutter="62" active-color="rgba(255, 158, 93, 1)" :bold="false" @change="changeOrderlist"></u-tabs-swiper>
		<swiper :current="tabcurrent" @transition="transition" @animationfinish="animationfinish" :style="{height:scrollviewHeight+'rpx',paddingBottom:'20rpx'}">
			<swiper-item v-for="(item,index) in tabslist" :key="index">
				<scroll-view scroll-y="true" :style="{height:scrollviewHeight+'rpx',width:'100%'}">

					    <view class="ordercard">
							<view class="ordercard-top">
								<text class="worktype">工种：水电</text>
								<view class="orderstatus">
									<text>顾客已取消</text>
									<u-icon name="../../../static/navigate.png" size="30"></u-icon>
								</view>
							</view>
							<view class="orderservice">
								<view class="serviceitem">
									<text class="servicetitle">上门时间：</text>
									<text class="servicevalue">9月5日 5:00 至 6:00</text>
								</view>
								<view class="serviceitem">
									<text class="servicetitle">客户姓名：</text>
									<text class="servicevalue">李静</text>
								</view>
								<view class="serviceitem">
									<text class="servicetitle">上门地址：</text>
									<text class="servicevalue">徐州市鼓楼区和兴广场家乐福二期四座15楼208室</text>
								</view>
							</view>
							<!-- 根据订单类别 状态判断展示哪一组按钮 -->
							<!-- 订单为全部、已接单类型 顾客取消状态 -->
							<view class="ordercard-btns" v-show="true">
								<view class="ordercard-btnitem firstbtn">
									<text>已取消</text>
								</view>
							</view>
							<!-- 订单为全部、已接单类型 等待上门状态 -->
							<view class="ordercard-btns" v-show="false">
								<view class="ordercard-btnitem secondbtn">
									<text>已上门</text>
								</view>
							</view>
							<!-- 订单为全部、施工中类型 施工中状态 -->
							<view class="ordercard-btns" v-show="false">
								<view class="ordercard-btnitem secondbtn">
									<text>施工完成</text>
								</view>
							</view>
							<!-- 订单为全部、施工中类型 申请审核中状态 -->
							<view class="ordercard-btns" v-show="false">
								<view class="ordercard-btnitem firstbtn">
									<text>申请审核中</text>
								</view>
							</view>
							<!-- 订单为全部、施工中类型 已完成状态 -->
							<view class="ordercard-btns" v-show="false">
								<view class="ordercard-btnitem firstbtn">
									<text>申请通过</text>
								</view>
							</view>
							<!-- 订单为全部、已完成类型 已完成状态 -->
							<view class="ordercard-btns" v-show="false">
								<view class="ordercard-btnitem firstbtn">
									<text>无售后</text>
								</view>
							</view>
							<!-- 订单为全部、预约订单类型 -->
							<view class="ordercard-btns" v-show="false">
								<view class="ordercard-btnitem thirthbtn">
									<u-icon name="phone" size="40" color="rgba(255, 158, 93, 1)"></u-icon>
									<text>电话咨询</text>
								</view>
								<view class="ordercard-btnitem fourthbtn">
									<text>预约成功</text>
								</view>
							</view>
						</view>
						
				 </scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabslist: [{
					name: '全部'
				}, {
					name: '预约订单'
				}, {
					name: '已接单'
				},{
					name:'施工中'
				},{
					name:'已完成'
				}],
				tabcurrent:0,
				scrollviewHeight:0
			}
		},
		onLoad() {
			const windowHeight=uni.getSystemInfoSync().windowHeight;
			this.scrollviewHeight=windowHeight/(uni.upx2px(windowHeight)/windowHeight)-100;
		},
		methods: {
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.ordertabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.ordertabs.setFinishCurrent(current);
				this.tabcurrent = current;
			},
			changeOrderlist(current){
				this.tabcurrent=current;
			},
		}
	}
</script>

<style lang="scss">
    page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		height: 100%;
		swiper{
			width: 100%;
			background-color: rgba(244, 248, 251, 1);
		}
		.ordercard{
			width: 710upx;
			height: auto;
			background-color: #FFFFFF;
			border-radius: 20upx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding-top: 40upx;
			margin: auto;
			margin-top: 20rpx;
			.ordercard-top{
				width: 680upx;
				display: flex;
				justify-content: space-between;
				font-size: 30upx;
			}
			.worktype{
				display: block;
				width: 330upx;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
				font-weight: blod;
			}
			.orderstatus{
				color: rgba(136, 136, 136, 1);
				display: flex;
				align-items: center;
			}
		}
		.orderservice{
			width: 680upx;
			height: auto;
			color: rgba(34, 34, 34, 1);
			padding-bottom: 20upx;
			display: flex;
			flex-wrap: wrap;
			.serviceitem{
				width: 100%;
				height: auto;
				margin-top: 20upx;
				display: flex;
				font-size: 30upx;
			}
			.servicetitle{
				display: block;
				word-break: break-all;
			}
			.servicevalue{
				display: block;
				width: 500upx;
			    word-break: break-all;
			}
			border-bottom: 1upx solid #F1F1F1;
		}
		.ordercard-btns{
			width: 100%;
			height: 100upx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.ordercard-btnitem{
				margin-right: 15upx;
				width: 200upx;
				height: 70upx;
				border-radius: 10upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28upx;
			}
			.firstbtn{
			    color: #FFFFFF;
				background-color: rgba(135,135,135,0.5);
			}
			.secondbtn{
			    color: #FFFFFF;
				background-color: #2979FF;
			}
			.thirthbtn{
			   color: rgba(255, 158, 93, 1);
			   border: 1upx solid rgba(255, 158, 93, 1);
			}
			.fourthbtn{
				color: #FFFFFF;
				background-color:rgba(176, 210, 255, 1);
			}
		}
	}
</style>
